<template>
  <div id="account" class="containner">
    <div class="text-left text-lg gray bold">填写并核对收货信息</div>
    <div class="mt-20 px-20 py-20 rounded box-shadow">
      <div class="text-left text-md dark bold">收货人信息</div>
      <div class="mt-10 flex justify-between item-center">
        <div class="flex item-center">
          <div class="address-name ml-20 py-10 px-20 rounded text-md dark hand hover-red">
            {{address.default_address.uaddr_name}}
          </div>
          <div class="ml-20 text-md dark">{{address.default_address.uaddr_name}}</div>
          <div class="ml-20 text-md dark">{{address.default_address.uaddr_province}}</div>
          <div class="ml-10 text-md dark">{{address.default_address.uaddr_city}}</div>
          <div class="ml-10 text-md dark">{{address.default_address.uaddr_district}}</div>
          <div class="ml-10 text-md dark">{{address.default_address.uaddr_address}}</div>
          <div class="ml-20 text-md dark">{{address.default_address.uaddr_phone}}</div>
        </div>
        <div class="text-md dark hover-red hand">修改收货信息</div>
      </div>
    </div>
    <div class="mt-20 px-20 py-20 rounded box-shadow">
      <div class="text-left text-md dark bold">配送清单</div>
      <div class="flex justify-between item-center text-md dark bg-gray px-20 py-5 cart-header my-20">
        <div class="mx-5"></div>
        <div class="cart-product mx-5">商品</div>
        <div class="cart-param mx-5">单价</div>
        <div class="cart-param mx-5">数量</div>
        <div class="cart-param mx-5">小计</div>
        <div class="cart-param mx-5"></div>
      </div>
      <!-- 遍历购物车列表 -->
      <div class="flex justify-between item-center text-md dark my-10 px-20 py-5 cart-body"
        v-for="(cart,index) in cart.cart_list" :key="cart.cart_id" v-if="cart.cart_checked == 1">
        <div class="mx-5"></div>
        <div class="cart-product mx-5 flex item-start"><img :src="product.base_img_url + cart.cart_thumburl"
            width="80px" height="80px" class="rounded hand">
          <div class="cart-name mx-10 text-left flex-column justify-between item-start">
            <div class="hover-red hand ">{{cart.cart_name}}</div>
            <div class="cart-sku flex item-center" v-for="sku in JSON.parse(cart.cart_sku)" :key="sku.value_id">
              <div class="gray text-sm pr-5 hand hover-red">{{sku.value_name}}</div>
            </div>
          </div>
        </div>
        <div class="cart-param mx-5">￥{{cart.cart_price.toFixed(2)}}</div>
        <div class="cart-param mx-5">{{cart.cart_count}}</div>
        <div class="cart-param mx-5">￥{{(cart.cart_count * cart.cart_price).toFixed(2)}}</div>
        <div class="cart-param mx-5 hover-red hand"></div>
      </div>
    </div>
    <div class="px-20 py-20">
      <div class="flex justify-end item-center text-right text-sm gray mt-20">
        <div class="account-left">商品总金额：</div>
        <div class="account-right">￥{{cart.total.toFixed(2)}}</div>
      </div>
      <div class="flex justify-end item-center text-right text-sm gray mt-10">
        <div class="account-left">配送费：</div>
        <div class="account-right">￥0</div>
      </div>
      <div class="flex justify-end item-center text-right text-sm gray mt-10">
        <div class="account-left">订单总金额：</div>
        <div class="account-right">￥{{cart.total.toFixed(2)}}</div>
      </div>
      <div class="flex justify-end item-center text-right text-sm gray mt-10">
        <div class="account-left">优惠金额：</div>
        <div class="account-right">￥0</div>
      </div>
      <div class="flex justify-end item-center text-right text-sm gray mt-20">
        <div class="account-left text-lg dark bold">应付总金额：</div>
        <div class="account-right text-xl red weight">￥{{cart.total.toFixed(2)}}</div>
      </div>
      <div class="flex justify-end item-center text-right text-sm gray mt-20">
        <div>配送至：</div>
        <div class="ml-5">{{address.default_address.uaddr_province}}</div>
        <div class="ml-5">{{address.default_address.uaddr_city}}</div>
        <div class="ml-5">{{address.default_address.uaddr_district}}</div>
        <div class="ml-5">{{address.default_address.uaddr_address}}</div>
        <div class="ml-20">收货人：</div>
        <div class="ml-5">{{address.default_address.uaddr_name}}</div>
        <div class="ml-5">{{address.default_address.uaddr_phone}}</div>
      </div>
      <div class="flex justify-end mt-20"><button class="btn-account hand" @click="add_order">提交订单</button></div>
    </div>
  </div>
</template>

<script>
  import {
    mapActions,
    mapMutations,
    mapState
  }
  from 'vuex'
  export default {
    computed: {
      ...mapState(['address', 'cart', 'product'])
    },
    methods: {
      ...mapActions('address', ['get_address_list']),
      ...mapActions('cart', ['get_cart_list']),
      ...mapActions('order', ['add_order'])
    },
    created() {
      //设置当前用户默认地址
      this.get_address_list()
      //设置当前用户购物车列表
      this.get_cart_list()
    }
  }
</script>

<style scoped="scoped">
  /*  收货信息栏  */
  .address-name {
    border: 1px solid #c33;
  }

  .account-address:hover {
    box-shadow: 0px 0px 10px #c33;
  }

  /*  配送信息栏  */
  .cart-header {
    border: 1px solid #ddd;
  }

  .cart-product {
    width: 600px;
  }

  .cart-param {
    width: 120px;
  }

  .cart-count {
    width: 120px;
    text-align: right;
  }

  .cart-name {
    width: 500px;
    height: 80px;
  }

  /*  结算信息栏  */
  .account-right {
    width: 120px;
  }

  .btn-account {
    outline: none;
    border: 0px;
    padding: 10px 20px;
    background-color: #c33;
    color: #fff;
    border-radius: 6px;
  }

  .btn-account:hover {
    background-color: #d33;
  }
</style>
